<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>



<!DOCTYPE html>
<html lang="zxx">

<head>
    <!-- 引入Bootstrap CSS -->

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .flight-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            margin-bottom: 20px;
        }
        .flight-card:hover {
            transform: translateY(-5px);
        }
        .flight-header {
            background: #2d5f9c;
            color: white;
            border-radius: 15px 15px 0 0;
            padding: 15px;
        }
        .flight-body {
            padding: 20px;
        }
        .flight-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    

        /* 完整样式 */
		 .pagination {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .page-item {
            list-style: none;
        }

        .page-link {
            padding: 8px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: #ffffff;
            color: #1a237e;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Segoe UI', system-ui;
            font-size: 14px;
        }

        .page-link:hover:not(:disabled) {
            background: #f5f5f5;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .page-link:disabled {
            background: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .page-item.active .page-link {
            background: #1a237e;
            border-color: #1a237e;
            color: white !important;
        }

        .page-first {
            background: #e3f2fd !important;
            border-color: #90caf9 !important;
        }

        .page-last {
            background: #f3e5f5 !important;
            border-color: #ce93d8 !important;
        }

        .fas {
            font-size: 14px;
        }

    </style>
    
    <meta charset="UTF-8">
    <meta name="description" content="Flyplane Template">
    <meta name="keywords" content="Flyplane, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通辽航空管理系统 | 航班大厅</title>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap"
    rel="stylesheet">

    <!-- Css Styles -->
    <link rel="stylesheet" href="qt/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="qt/css/barfiller.css" type="text/css">
    <link rel="stylesheet" href="qt/css/magnific-popup.css" type="text/css">
    <link rel="stylesheet" href="qt/css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="qt/css/slick.css" type="text/css">
    <link rel="stylesheet" href="qt/css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/style.css" type="text/css">
</head>

<body>
    <!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <!-- Offcanvas Menu Begin -->
    <div class="offcanvas-menu-overlay"></div>
    <div class="offcanvas-menu-wrapper">
        <div class="offcanvas__logo">
            <a href="#"><img src="qt/img/logo.png" alt=""></a>
        </div>
        <div id="mobile-menu-wrap"></div>
        <div class="offcanvas__widget">
            <ul>
                <li><span class="icon_pin"></span> 84 Forest Ave, Lake Grove, New York</li>
                <li><span class="icon_phone"></span> (+12) 345-678-91012</li>
                <li><span class="icon_mail"></span> contact.17sucai@gmail.com</li>
            </ul>
        </div>
        <div class="offcanvas__social">
            <a href="#"><span class="social_facebook"></span></a>
            <a href="#"><span class="social_twitter"></span></a>
            <a href="#"><span class="social_youtube"></span></a>
            <a href="#"><span class="social_skype"></span></a>
        </div>
    </div>
    <!-- Offcanvas Menu End -->

    <!-- Header Section Begin -->
    <header class="header">
        <div class="container">
            <div class="header__top">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="header__top__widget">
                            <ul>
                                <li><span class="icon_pin"></span> 84 Forest Ave, Lake Grove, New York</li>
                                <li><span class="icon_phone"></span> (+12) 345-678-91012</li>
                                <li><span class="icon_mail"></span> contact.17sucai@gmail.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="header__top__social">
                            <a href="#"><span class="social_facebook"></span></a>
                            <a href="#"><span class="social_twitter"></span></a>
                            <a href="#"><span class="social_youtube"></span></a>
                            <a href="#"><span class="social_skype"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__options">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="header__logo">
                            <a href="./index.html"><img src="qt/img/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <nav class="header__menu mobile-menu">
                            <ul>
                                <li><a href="user_index.jsp">首页</a></li>
                                <li><a href="#">我的订单</a>
                                    <ul class="dropdown">
                                        <li><a href="TicketListServlet?pageNo=1">订单列表</a></li>
                                        <li><a href="ChangeTicketListServlet?pageNo=1">改签申请记录</a></li>
                                        <li><a href="QuitListByUserIdServlet?pageNo=1">退票申请记录</a></li>
                                    </ul>
                                </li>
                                <li class="active"><a href="FlightListServlet?pageNo=1">航班大厅</a></li>
                                <li><a href="./about.html">About Us</a></li>
                                <li><a href="./contact.html">Contacts</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="canvas__open"><i class="fa fa-bars"></i></div>
        </div>
    </header>
    <!-- Header Section End -->

    <!-- Breadcrumb Begin -->
    <div class="breadcrumb-option spad set-bg" data-setbg="qt/img/breadcrumb-bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb__text">
                        <div class="breadcrumb__links">
                            <a href="user_index.jsp">首页</a>
                            <span>航班大厅</span>
                        </div>
                        <h2>航班大厅</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Blog Section Begin -->
    <section class="blog spad">
        <div class="container">
            <!-- 航班列表 -->
            <div class="row">
                <c:forEach items="${list}" var="flight">
                    <div class="col-md-6 col-lg-4">
                        <form action="FlightParticularsServlet" method="get" class="flight-form">
                            <!-- 隐藏字段传递航班ID -->
                            <input type="hidden" name="flightId" value="${flight.flightId}">
                            
                            <div class="flight-card" onclick="this.closest('form').submit()">
                                <div class="flight-header">
                                    <h5 class="mb-0">航班号：${flight.flightId}</h5>
                                </div>
                                <div class="flight-body">
                                    <div class="flight-info">
                                        <span>出发地</span>
                                        <strong>${flight.origin}</strong>
                                    </div>
                                    <div class="flight-info">
                                        <span>目的地</span>
                                        <strong>${flight.destination}</strong>
                                    </div>
                                    <div class="flight-info">
                                        <span>起飞时间</span>
                                        <strong>${fn:replace(flight.departureTime, 'T', ' ')}</strong>
                                    </div>
                                    <div class="flight-info">
                                        <span>到达时间</span>
                                        <strong>${fn:replace(flight.arrivalTime, 'T', ' ')}</strong>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </c:forEach>
            </div>
    
            <%-- 分页容器 --%>
            <nav aria-label="Page navigation" class="page">
                <c:choose>
                    <%-- 有数据时显示分页 --%>
                    <c:when test="${not empty list && box.totalPages > 0}">
                        <ul class="pagination">
                            <%-- 上一页 --%>
                            <li class="page-item ${box.pageNo == 1 ? 'disabled' : ''}">
                                <c:if test="${box.pageNo > 1}">
                                    <c:url var="prevUrl" value="/FlightListServlet">
                                        <c:param name="pageNo" value="${box.pageNo - 1}"/>
                                    </c:url>
                                    <a class="page-link" href="${prevUrl}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo; 上一页</span>
                                    </a>
                                </c:if>
                                <c:if test="${box.pageNo == 1}">
                                    <span class="page-link disabled">&laquo; 上一页</span>
                                </c:if>
                            </li>

                            <%-- 智能页码计算 --%>
                            <c:set var="totalPages" value="${box.totalPages}"/>
                            <c:set var="currentPage" value="${box.pageNo}"/>
                            
                            <%-- 动态页码范围计算 --%>
                            <c:choose>
                                <%-- 总页数<=5时显示全部 --%>
                                <c:when test="${totalPages <= 5}">
                                    <c:set var="startPage" value="1"/>
                                    <c:set var="endPage" value="${totalPages}"/>
                                </c:when>
                                <c:otherwise>
                                    <%-- 当前页在前3页时显示1-5页 --%>
                                    <c:if test="${currentPage <= 3}">
                                        <c:set var="startPage" value="1"/>
                                        <c:set var="endPage" value="5"/>
                                    </c:if>
                                    <%-- 当前页在末尾时显示最后5页 --%>
                                    <c:if test="${currentPage > totalPages - 2}">
                                        <c:set var="startPage" value="${totalPages - 4}"/>
                                        <c:set var="endPage" value="${totalPages}"/>
                                    </c:if>
                                    <%-- 中间页码显示当前页前后各2页 --%>
                                    <c:if test="${currentPage > 3 && currentPage <= totalPages - 2}">
                                        <c:set var="startPage" value="${currentPage - 2}"/>
                                        <c:set var="endPage" value="${currentPage + 2}"/>
                                    </c:if>
                                </c:otherwise>
                            </c:choose>

                            <%-- 生成页码 --%>
                            <c:forEach begin="${startPage}" end="${endPage}" var="pageNumber">
                                <c:if test="${pageNumber >= 1 && pageNumber <= totalPages}">
                                    <c:url var="pageUrl" value="/FlightListServlet">
                                        <c:param name="pageNo" value="${pageNumber}"/>
                                    </c:url>
                                    <li class="page-item ${pageNumber == currentPage ? 'active' : ''}">
                                        <a class="page-link" href="${pageUrl}">${pageNumber}</a>
                                    </li>
                                </c:if>
                            </c:forEach>

                            <%-- 下一页 --%>
                            <li class="page-item ${box.pageNo == totalPages ? 'disabled' : ''}">
                                <c:if test="${box.pageNo < totalPages}">
                                    <c:url var="nextUrl" value="/FlightListServlet">
                                        <c:param name="pageNo" value="${box.pageNo + 1}"/>
                                    </c:url>
                                    <a class="page-link" href="${nextUrl}" aria-label="Next">
                                        <span aria-hidden="true">下一页 &raquo;</span>
                                    </a>
                                </c:if>
                                <c:if test="${box.pageNo == totalPages}">
                                    <span class="page-link disabled">下一页 &raquo;</span>
                                </c:if>
                            </li>
                        </ul>
                    </c:when>

                    <%-- 无数据提示 --%>
                    <c:otherwise>
                        <div class="alert alert-info mt-4">
                            <i class="fas fa-info-circle"></i> 暂时没有找到符合条件的航班
                        </div>
                    </c:otherwise>
                </c:choose>
            </nav>
        </div>
    </section>
    <!-- Blog Section End -->

    <!-- Footer Section Begin -->
    <footer class="footer spad">
        <div class="container">
            <div class="row d-lfex justify-content-center">
                <div class="col-lg-7">
                    <div class="footer__text">
                        <div class="footer__about">
                            <div class="footer__logo">
                                <a href="#"><img src="img/footer-logo.png" alt=""></a>
                            </div>
                            <p>Nullam ultrices tortor non diam ullamcorper auctor. In urna tellus, auctor sit amet est
                            ut, scelerisque volutpat diam.</p>
                        </div>
                        <div class="footer__social">
                            <a href="#"><span class="social_facebook"></span></a>
                            <a href="#"><span class="social_twitter"></span></a>
                            <a href="#"><span class="social_youtube"></span></a>
                            <a href="#"><span class="social_skype"></span></a>
                        </div>
                        <div class="footer__nav">
                            <ul>
                                <li><a href="./index.html">Home</a></li>
                                <li><a href="#">Pages</a></li>
                                <li><a href="./blog.html">Blog</a></li>
                                <li><a href="./about.html">About Us</a></li>
                                <li><a href="./contact.html">Contacts</a></li>
                            </ul>
                        </div>
                        
                        <p class="footer__copyright">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart color-danger" aria-hidden="true"></i> by <a href="https://www.17sucai.com" target="_blank" rel="nofollow noopener">17sucai</a>
                        </p>
                        
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Js Plugins -->
    <script src="qt/js/jquery-3.3.1.min.js"></script>
    <script src="qt/js/bootstrap.min.js"></script>
    <script src="qt/js/jquery.barfiller.js"></script>
    <script src="qt/js/jquery.magnific-popup.min.js"></script>
    <script src="qt/js/jquery.nice-select.min.js"></script>
    <script src="qt/js/slick.min.js"></script>
    <script src="qt/js/jquery.slicknav.js"></script>
    <script src="qt/js/owl.carousel.min.js"></script>
    <script src="qt/js/main.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>